<template>
    <div class="photo_container">
        <h4 class="title">{{photoInfo.title}}</h4>
        <p class="subTitle">
            <span>发表时间：{{photoInfo.add_time | dateFormat }}</span>
            <span>点击次数：{{photoInfo.click}}</span>
        </p>
        <hr>

        <!--缩略图区域-->
        <div class="thumbs">
            <vue-preview :slides="list"></vue-preview>
        </div>
        <!--图片内容区域-->
        <div class="p_content" v-html="photoInfo.content"></div>
        <!--评论子组件的区域-->
        <comment :id="id"></comment>
    </div>
</template>

<script>
    import comment from '../subcomponents/comment.vue'
    export default {
        name: "photoInfo",
        data(){
            return {
                id:this.$route.params.id,
                list:[],//存放缩略图
                photoInfo:{}
            }
        },
        components:{
            comment
        },
        methods:{
            //获取缩略图
            getThumbs(){
                this.$http.get('api/getthumimages/'+this.id).then( result => {
                    if (result.body.status === 0){
                        // console.log(result)
                        //遍历的补全图片的宽和高和小图
                        result.body.message.forEach( item => {
                            //设置每条数据的小图，宽，高
                            item.msrc = item.src;
                            item.w = 600;
                            item.h = 400;
                        })
                        this.list = result.body.message;
                    }
                })
            },
            getContent(){
                this.$http.get('api/getimageInfo/'+this.id).then( result =>{
                    // console.log(result.body)
                    if (result.body.status === 0){
                        this.photoInfo = result.body.message[0];
                    }
                })
            }
        },
        created(){
            this.getThumbs();
            this.getContent();
        }
    }
</script>

<style scoped lang="less">
    .photo_container{
        padding: 0 5px;
        .title{
            font-size: 16px;
            text-align: center;
            color: red;
            margin: 12px 0;
        }
        .subTitle{
            display: flex;
            justify-content: space-between;
            color: #226aff;
            font-size: 14px;
        }
        .p_content{
            font-size: 13px;
            line-height: 30px;
        }
    }
</style>